<script setup lang="ts">
import { ref } from 'vue'

const stats = ref({
  todayLessons: { current: 4, total: 6 },
  reviewLessons: { current: 4, total: 6 },
  pendingFeedback: 4,
  monthlyHours: 42,
})
</script>

<template>
  <!-- 统计卡片 -->
  <view class="stats-card">
    <view class="stats-grid">
      <view class="stat-item">
        <view class="number">
          {{ stats.todayLessons.current }}<text class="denominator">
            /{{ stats.todayLessons.total }}
          </text>
        </view>
        <view class="label">
          今日学习课
        </view>
      </view>
      <view class="stat-item">
        <view class="number">
          {{ stats.reviewLessons.current }}<text class="denominator">
            /{{ stats.reviewLessons.total }}
          </text>
        </view>
        <view class="label">
          今日复习课
        </view>
      </view>
      <view class="stat-item">
        <view class="number">
          {{ stats.pendingFeedback }}
        </view>
        <view class="label">
          待反馈家长
        </view>
      </view>
      <view class="stat-item">
        <view class="number">
          {{ stats.monthlyHours }}
        </view>
        <view class="label">
          本月课时
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.stats-card {
    margin: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20rpx;

        .stat-item {
            text-align: center;

            .number {
                font-size: 40rpx;
                color: #f6a035;
                font-weight: bold;

                .denominator {
                    font-size: 28rpx;
                    color: #999;
                }
            }

            .label {
                font-size: 24rpx;
                color: #666;
                margin-top: 10rpx;
            }
        }
    }
}
</style>
